<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="billiards-info-box flexWrapNo">
					<view class="billiards-img">
						<image src="/static/home/tableImg.png" v-if="type==1"></image>
						<image src="/static/home/mjImg.png" v-else></image>
					</view>
					<view class="info-right">
						<view class="billiards-info">
							<view class="billiards-name">{{tableInfo.equipment_name}}</view>
							<view class="shop-name">{{tableInfo.shop_name}}</view>
							<view class="status" :class="{busy:tableInfo.status==2,repair:tableInfo.status==3}">{{tableInfo.status==2?'使用中':tableInfo.status==3?'维护':'空闲'}}</view>
							<view class="order-time">{{tableInfo.status==2?'可预约：'+tableInfo.yuyues:''}}</view>
						</view>
					</view>
				</view>
				<view class="padd-box">
					<view class="time-box">
						<view class="flexWrap">
							<view class="meal-info">
								<view class="meal-title">续费</view>
								<view class="price-text">价格：{{tableInfo.renew_price||0}}元/小时</view>
							</view>
							<view class="operation-box flexWrapNo">
								<view class="reduce-btn" @tap="reduce()">-</view>
								<view class="operation-num">{{totalHour}}小时</view>
								<view class="increase-btn" @tap="increase()">+</view>
							</view>
						</view>
						<view class="lattice-box flexWrapNo">
							<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
								<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}"></view>
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
						<view class="lattice-box flexWrapNo" v-if="allHour>23">
							<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
								<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}"></view>
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
						<view class="select-time">已选时间：{{currmentDate}} {{currmentTime}}～<text v-if="allHour>23">次日</text>{{nextTime}}</view>
					</view>
					<view class="explain-box">
						<view class="explain-cont">
							<view v-html="tableInfo.immediately_opening_explain"></view>
						</view>
					</view>
				</view>
				<view class="btn-box flexWrap">
					<view class="total-price">合计：<text v-if="currmentIndex>1">¥{{mealList[currmentIndex].p_price||0}}</text> <text v-else>{{totalPrice||0}}</text> </view>
					<view class="determine-btn" :class="{weihu:tableInfo.status==3}" @tap="goConfirm()">{{tableInfo.status==3?"维护中暂停使用":"确定下单"}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				currmentDate:"",
				currentHour:0,
				startTime:"",
				currmentTime:"",
				nextTime:"",
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				nextIndex:0,
				dateList:[],
				status:1,
				equipment_id:"",
				tableInfo:{},
				mealList:[
					{
						p_name:"立即开台"
					},
					{
						p_name:"预约开台"
					}
				],
				hoursList:[],
				store_id:"",
				allHour:0,
				type:1,
				renew_order_id:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
				minReservationTime:0,//最低预定时长
				minRenewalTime:0//最低续费时长
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		computed:{
			totalPrice(){
				let totalPrice=0;
				totalPrice+=Number(this.totalHour*this.tableInfo.renew_price)
				return totalPrice.toFixed(2);
			},
		},
		onLoad(ops) {
			this.equipment_id=ops.equipment_id
			this.renew_order_id=ops.renew_order_id||""
			this.store_id=ops.store_id||uni.getStorageSync('store_id')
			if(this.store_id){
				uni.setStorageSync('store_id',this.store_id)
			}
			uni.setStorageSync('equipment_id',this.equipment_id)
			this.tableDetails();
		},
		onShareAppMessage() {
			return {
				path:'/pages/home/renew?equipment_id='+this.equipment_id+'&store_id='+this.store_id
			};
		},
		methods: {
			goVerificaion(){
				if(this.tableInfo.status==3){
					this.$tools.showToast('对不起，请您选择其他桌，本桌真在维护或者使用中')
					return;
				}
				this.goPage('/pages/coupon/verificationCoupon')
			},
			// 选择时间
			bindTimeChange: function(e) {
				if(this.dateIndex!=0){//如果不是今天
					if(Number(e.detail.value.split(':')[0])+Number(this.totalHour)>=24){
						this.$tools.showToast('每日可选时间为24小时')
						return;
					}
				}else{
					if (this.allHour==47){
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}
				this.currmentTime=e.detail.value
				let currmentDate=this.getDate(0)+' '+this.currmentTime
				this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
				this.currentHour=this.currmentTime.split(':')[0]
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
			},
			isToday(today,date) {
				if(!date) return;
				var d = new Date(date.replace(/-/g,"/"));
				var todaysDate = today?new Date(today.replace(/-/g,"/")):new Date();
				return d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0);
			},
			greaterToday(today,date){
				if(!date) return;
				var d = new Date(date.replace(/-/g,"/"));
				var todaysDate = today?new Date(today.replace(/-/g,"/")):new Date();
				return d.setHours(0,0,0,0)>todaysDate.setHours(0,0,0,0);
			},
			// 加分钟
			addMinutes(date,num){
				var time = new Date();
				var time1 =Date.parse(date.replace(/-/g, '/'))
				time.setTime(time1 + 60000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			checkTime(i) {
			    if (i < 10) {
			        i = "0" + i;
			    }
			    return i;
			},
			// 获取当前日期
			getDate(type,num){
				num=num||0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year=time.getFullYear()
				let month=time.getMonth()+1
				let day=time.getDate()
				let fullDate=""
				if(type==0){
					fullDate=year+'-'+month+'-'+day
				}else{
					fullDate=month+'月'+day+'日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate,num){
				num=num||0
				var time = new Date();
				var time1 =currmentDate?Date.parse(currmentDate.replace(/-/g, '/')):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取各个参数
			getHoursData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				if((this.tableInfo.yuyues&&this.currmentIndex!=0)||this.renew_order_id){//如果有预约时间就从预约时间开始
					let addTime=this.addMinutes(this.getDate(0)+' '+this.tableInfo.yuyues,1)
					let currmentTime=this.getDate(0)+' '+addTime
					this.currmentTime=this.getTimeString(currmentTime)
					this.nextTime=this.getTimeString(currmentTime,this.totalHour)
					this.startTime=this.getTimeString(currmentTime)
					if(this.tableInfo.day_yuyues){//如果有预约
						this.currentHour=this.tableInfo.yuyues.split(':')[0]
						if(this.isToday(this.getDate(0,this.dateIndex),this.tableInfo.day_yuyues)){
							console.log('是同一天111111')
						}else{
							this.dateIndex+=1
							this.nextIndex=this.dateIndex+1
							let key=Object.keys(this.tableInfo.t_date)
							this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
							console.log('不是同一天111111')
						}
					}
				}else{
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
					this.startTime=this.getTimeString()
				}
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
				if(this.currmentIndex==0){
					this.currmentDate=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					this.currmentDate=this.tableInfo.yuyues!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
			},
			// 切换套餐
			changeMeal(index){
				this.currmentIndex=index
				this.totalHour=1//选择的小时数恢复默认
				this.dateIndex=0//天数恢复默认
				let key=Object.keys(this.tableInfo.t_date)
				this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
				if(this.currmentIndex>1){
					this.totalHour=this.mealList[this.currmentIndex].duration
				}
				this.getHoursData();
			},
			// 增加时间
			increase(){
				if(this.dateIndex!=0){//如果不是今天
					if (this.allHour==23){
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}else{
					if (this.allHour==47){
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}
				this.totalHour++
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				let currmentDate=this.getDate(0)+' '+this.currmentTime
				this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
			},
			// 减少时间
			reduce(){
				if (this.totalHour==1) return//减少为一个小时时不可再减少
				this.totalHour--
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				let currmentDate=this.getDate(0)+' '+this.currmentTime
				this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
			},
			// 选择日期
			changeDate(index){
				if(this.tableInfo.day_yuyues){//如果有预约
					if(this.isToday(this.getDate(0,index),this.tableInfo.day_yuyues)){
						console.log('是同一天111111')
					}else{
						if(this.greaterToday(this.getDate(0,index),this.tableInfo.day_yuyues)){
							console.log('预约时间大于今天')
							this.$tools.showToast('当前日期没有可预约的时段')
							return;
						}else{
							console.log('预约时间不大于今天')
						}
					}
				}
				if(this.dateIndex==index){
					return;
				}
				this.dateIndex=index
				if(this.currmentIndex>1){
					this.totalHour=this.mealList[this.currmentIndex].duration
				}else{
					this.totalHour=1//选择的小时数恢复默认
				}
				if(this.currmentIndex>=1){//如果是预约就选择当前日期下的格子
					let key=Object.keys(this.tableInfo.t_date)
					this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
					this.currmentDate=this.getDate(1,this.dateIndex)
					if(this.dateIndex!=0){//不是今天
						this.startTime="00:00"
						this.currmentTime="00:00"
						this.pastHour=-1
						this.currentHour=0
						this.allHour=Number(this.totalHour)+Number(this.currentHour)
						let currmentDate=this.getDate(0)+' '+this.currmentTime
						this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
					}else{
						this.getHoursData();
						this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])//如果是今天就获取第二天的格子
					}
				}
			},
			// 桌球详情
			tableDetails(){
				this.$request.post(this.$api.tableDetails, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:this.equipment_id
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.tableInfo=data
						this.type=data.type
						this.getHoursData();
						this.mealList.push(...data.set_meal)
						let key=Object.keys(this.tableInfo.t_date)
						this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						if(data.days_in_advance==1){
							this.dateList=[{riqis:'今天'}]
						}else if(data.days_in_advance==2){
							this.dateList=[{riqis:'今天'},{riqis:'明天'}]
						}else{
							this.dateList=[{riqis:'今天'},{riqis:'明天'},{riqis:'后天'}]
						}
						this.minRenewalTime=data.minimum_renewal_duration
						if(this.renew_order_id){
							this.currmentIndex=0
							this.changeMeal(0)
						}
					}
				})
			},
			// 提交参数验证
			goConfirm(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				if(this.tableInfo.status==3){
					this.$tools.hideLoading()
					this.$tools.showToast('对不起，请您选择其他桌，本桌真在维护或者使用中')
					return;
				}else if(this.minRenewalTime>this.totalHour){
					this.$tools.hideLoading()
					this.$tools.showToast('最低续费时长为'+this.minRenewalTime+'小时')
					return;
				}
				let start_time=""
				let end_time=""
				let service_date=""
				if(this.currmentIndex!=0){
					start_time=this.currmentTime
				}
				if(this.currmentIndex==0){
					service_date=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					service_date=this.tableInfo.yuyues!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
				this.$request.post(this.$api.confirmOrder, {
					store_id:uni.getStorageSync('store_id'),
					store_equipment_id:this.equipment_id,
					types:this.type,
					order_type:this.currmentIndex==0?'immediately':this.currmentIndex==1?'make_appointment':'other_packages',
					tr:this.currmentIndex>1?this.mealList[this.currmentIndex].tr:"",
					renew_order_id:this.renew_order_id,
					hour_start_time:start_time,
					hours:this.totalHour,
					day_type:this.dateIndex
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let orderData={
							store_equipment_id:this.equipment_id,
							order_type:this.currmentIndex==0?'immediately':this.currmentIndex==1?'make_appointment':'other_packages',
							order_price:this.currmentIndex<=1?this.totalPrice:this.mealList[this.currmentIndex].p_price,
							yingfu_price:this.currmentIndex<=1?this.totalPrice:this.mealList[this.currmentIndex].p_price,
							type:1,
							coupon_id:0,
							store_name:this.tableInfo.shop_name,
							num_hour:this.totalHour,
							service_start_time:start_time,
							service_end_time:end_time,
							equipment_name:this.tableInfo.equipment_name,
							service_date:service_date,
							tr:this.currmentIndex>1?this.mealList[this.currmentIndex].tr:"",
							totalHour:this.totalHour,
							is_ci:this.allHour>23?1:0,
							types:this.type,
							renew_order_id:this.renew_order_id,
							hour_start_time:start_time,
							hours:this.totalHour,
							day_type:this.dateIndex
						}
						this.submitOrder(orderData)
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								
							}
						});
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			submitOrder(orderData){
				orderData.tr?orderData.num_hour=orderData.tr:orderData.num_hour=""
				orderData.store_id=uni.getStorageSync('store_id')
				this.$request.post(this.$api.submitOrder,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						orderData.startTime=data.start_time
						orderData.endTime=data.end_time
						uni.navigateTo({
							url:'/pages/home/confirmOrder?orderData='+JSON.stringify(orderData)
						})
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 200upx;
		background-color:#F7F7F7;
	}
	.padd-box{
		padding: 0 36upx;
	}
	.billiards-info-box{
		align-items: flex-end;
		.billiards-img{
			width: 400upx;
			height: 400upx;
		}
		.info-right{
			margin-left: 20upx;
			.billiards-info{
				.billiards-name{
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 66upx;
					color: #333;
				}
				.shop-name{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #6E6E6E;
					margin-top: 10upx;
				}
				.status{
					width: 108upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #2CA522;
					border-radius: 22upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 18upx;
				}
				.busy{
					background: #FFB726;
					color: #333;
				}
				.repair{
					background:#6E6E6E;
				}
				.order-time{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					height: 34upx;
					color: #FFB726;
					margin-top: 24upx;
				}
			}
		}
	}
	.time-box{
		margin-top: 30upx;
		.meal-info{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #6E6E6E;
			.meal-title{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50upx;
				color: #333;
				margin-bottom: 12upx;
			}
			.set-time{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #FFB726;
				margin-left: 28upx;
			}
		}
		.operation-box{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
			.reduce-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#E2E2E2;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color:#969696;
			}
			.operation-num{
				margin: 0 30upx;
			}
			.increase-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#FFB726;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
		}
		.lattice-box{
			margin-top: 34upx;
			.lattice-item{
				margin-right: 6upx;
				.lattice{
					width: 24upx;
					height: 48upx;
					background:#E2E2E2;
					border-radius: 4upx;
				}
				.blue{
					background: #E69C2F !important;
				}
				.white{
					background:#FFFFFF;
				}
				.red{
					background:#FF4726!important;
				}
				.lattice-text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28upx;
					color: #55525D;
				}
			}
		}
		.select-time{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 36upx;
		}
	}
	.explain-box{
		margin-top: 28upx;
		border-top: 2upx solid #E2E2E2;
		.point-box{
			margin-top: 20upx;
			align-items: flex-start;
			.point-icon{
				width: 32upx;
				height: 32upx;
				margin-right: 20upx;
				margin-top: 10upx;
			}
			.point-cont{
				.point-text{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40upx;
					color: #FFB726;
				}
			}
		}
		.explain-cont{
			margin-top: 36upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #6E6E6E;
			.explain-text{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #6E6E6E;
			}
			rich-text{
				p{
					color: #6E6E6E;
				}
			}
		}
	}
	.btn-box{
		background-color: #fff;
		padding: 18upx 32upx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.total-price{
			font-size: 20upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28upx;
			color: #333;
			text{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50upx;
				color: #333;
			}
		}
		.determine-btn{
			width: 286upx;
			height: 80upx;
			text-align: center;
			background:#FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 80upx;
			color: #333;
		}
		.weihu{
			background-color: #606061;
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.coupon-box{
		width: 646upx;
		height: 780upx;
		background:url('/static/home/couponBox.png') no-repeat center/ 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.coupon-cont{
			width: 425upx;
			border-radius: 10upx;
			position: absolute;
			top: 100upx;
			left: 0;
			right: 0;
			margin: auto;
			.coupon-head{
				color: #760D00;
				font-size:48upx;
				text-align: center;
				font-weight: bold;
				height: 106upx;
				line-height: 106upx;
			}
			.coupon-padd{
				padding-top: 20upx;
				.coupon-item{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #DD1800;
					height: 68upx;
					line-height: 68upx;
					background: rgba(255,250,211,0.39);
					border-radius: 16upx;
					margin-top: 12upx;
					padding: 0 24upx;
				}
				.coupon-left{
					@include ellipsis(1);
				}
				.one{
					height: 146upx;
					line-height: 146upx;
					margin-top: 40upx;
				}
				.two{
					height: 98upx;
					line-height: 98upx;
					margin-top: 20upx;
				}
			}
		}
		.receive-btn{
			width: 340upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 50upx;
			background-color: #FDD56F;
			position: absolute;
			top: 546upx;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			color: #9F610F;
			font-size: 36upx;
			font-weight: 600;
		}
	}
</style>
